<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, 
			fieldset, legend, img { margin:0; padding:0; }
			img{border:0;}
			ul li,ol{ list-style:none;}
			a{ text-decoration:none; color:#6c6c6c;}
			a:hover{ color:#f22e00;}
			input{ outline:none;}
			th,i,em,h1,h2,h3,h4,h5,h6,strong { font-style:normal; font-weight:normal; }
			body { color:#333;  font: 12px/22px '宋体', Tahoma, Arial; background:#fff;}
			table { border-collapse: collapse; border-spacing: 0; }
			button { cursor: pointer; }
			textarea { word-wrap: break-word; resize: none;}
			.clearfix:after{visibility:hidden; clear:both; display:block; 
				content:"."; height:0}
			.logo{width: 100%;height: 60px;}
			.logo a{width: 195px;height: 30px;position: absolute;top: 15px;left: 40px;}
			.main{width:100%;height: 700px;margin: auto;position: relative;
				background:#f7f2ec url(images/dl_03.jpg) no-repeat 70px 100px;}
			.main .box{width: 420px;height: 560px;background: #fff;position: absolute;
				top: 70px;right: 70px;}
			.main .box .reg{width: 420px;height: 50px;background: #f7f7f7;}
			.main .box .reg ul li{float: left;width: 210px;height: 48px;
				border-bottom: 2px solid #f7f7f7;text-align: center;line-height: 50px;}
			.main .box .reg ul li a{font-size: 16px;padding: 16px 70px;}
			.main .box .reg ul li:hover{border-bottom: 2px solid #464646;font-weight: bold;}
			.main .box input{height: 26px;border: 1px solid #ccc;margin-top: 20px;
				margin-left: 60px;padding: 5px;}
			.main .box #btn1{height: 36px;width: 100px;margin-left: 12px;cursor: pointer;}
			.main .box #btn2{width: 300px;height: 40px;background: #d2041f;position: absolute;
				left: 0px;bottom: 280px;border-radius: 20px;color: #fff;cursor: pointer;}
			.main .box .wx{width: 280px;height: 32px;position: absolute;left: 70px;bottom: 200px;}	
			.main .box .wx ul li{float: left;width: 32px;height: 32px;margin-right: 30px;}	
			.main .box .wx ul li:last-child{margin-right: 0px;}	
			.main .box .duanxin{display: block;position: absolute;}
			.main .box .zhanghao{display: none;position: absolute;}
			
			.footer{width: 100%;height: 110px;position: relative;}
			.footer .con{width: 560px;height: 20px;position: absolute;left: 50%;margin-left: -280px ;}
			.footer .con li{float: left;margin-top: 20px;}
			.footer .con li a{padding: 0 10px;border-right: 1px solid #ccc;color: #333;}
			.footer .con li a:hover{text-decoration: underline;}
			.footer .copy{position: absolute;bottom: 35px;left: 450px;}
		</style>
		<script src="js/jquery-1.12.3.js"></script>
		<script src="js/jquery.cookie.js"></script>
		<script type="text/javascript">
			$(function(){
				//切换到登录页面
				$("#xx").click(function(){
					$(".duanxin").show();
					$(".zhanghao").hide();
					$("#btn2").css("background","#d2041f")
					$("#btn2").val("登录");
					//
					var regtel=/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0-9]))\d{8}$/;
					var flag1 = false;
					var flag2 = false;
					$("#phone").keyup(function(){
						if( regtel.test( $("#phone").val() ) ){
							$("#tip").html("");
							flag1 = true;
						}
						else{
							$("#tip").html("手机输入不合法");
							flag1 = false;
						}
					})
					//
					$("#btn1").click(function(){
						$("#btn1").val( parseInt(Math.random()*10)+""+parseInt(Math.random()*10)+parseInt(Math.random()*10)+parseInt(Math.random()*10) );
					})
					//
					$("#code").keyup(function(){
						if( $("#code").val()!=$("#btn1").val() ){
							$("#tip").html("验证码输入不合法");
							flag2 = false;
						}
						else{
							$("#tip").html("");
							flag2 = true;
						}
					})
					//
					$("#btn2").click(function(){
						if(flag1 && flag2){
							var d = new Date();
							d.setDate(d.getDate()+30);
							$.cookie("user",JSON.stringify( $("#phone").val() ),{expires:30,path:"/"}) //保存用户名到cookie
							location.href="index.html";
						}
						else{
							alert("手机号或验证码错误")
						}
					})
				})
				//
				//切换到注册页面
				$("#mm").click(function(){
					$(".zhanghao").show();
					$(".duanxin").hide();
					$("#btn2").css("background","orange");
					$("#btn2").val("注册");
					//
					var regname=/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0-9]))\d{8}$/;
					var regpwd=/^.{6,18}$/;
					var flag3 = false;
					var flag4 = false;
					$("#name").keyup(function(){
						if(regname.test( $("#name").val() )){
							$("#tip2").html("");
							flag3 = true;
						}
						else{
							$("#tip2").html("手机号输入不合法");
							flag3 = false;
						}
					})
					$("#pwd").keyup(function(){
						if(regpwd.test( $("#pwd").val() )){
							$("#tip2").html("");
							flag4 = true;
						}
						else{
							$("#tip2").html("密码长度6-20位");
							flag4 = false;
						}
					})
					//
					$("#btn2").click(function(){
						var xhr = new XMLHttpRequest();
						xhr.open("post","http://127.0.0.1/register.php",true);
						xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
						
						xhr.send("username="+ $("#name").val()+"&password="+ $("#pwd").val() );
						xhr.onreadystatechange = function(){
							if(xhr.status==200&&xhr.readyState==4){
								//console.log(xhr.responseText);
								var msg = JSON.parse(xhr.responseText);
								if(msg.status==1){
									alert("注册成功");
								}
								else if(msg.status==2){
									alert("用户名已经存在")
								}
								else if(msg.status==0){
									alert("注册失败")
								}
							}
						}
					})
				})
				
				
			})
		</script>
	</head>
	<body>
		<div class="logo">
			<a href="#"><img src="images/logo_mini.png"/></a>
		</div>
		<div class="main">
			<div class="box">
				<div class="reg">
					<ul>
						<li><a href="javascript:;" id="xx">短信登录</a></li>
						<li><a href="javascript:;" id="mm">注册账号</a></li>
					</ul>
				</div>
				<!--短信登录-->
				<div class="duanxin">
					<input type="text" placeholder="手机号码" style="width: 290px;" id="phone"/>
					<input type="text" placeholder="短信验证码" style="width: 170px;" id="code"/>
					<input type="button" value="获取验证码" id="btn1"/>
					<p style="line-height: 60px;position: absolute;left: 60px;" id="tip">提示文字</p>
					<p style="line-height: 60px;position: absolute;right: 60px;"><a href="#">找回密码</a></p>
				</div>
				
				<!--账号密码登录-->
				<div class="zhanghao">
					<input type="text" placeholder="手机号" style="width: 290px;" id="name"/>
					<input type="password" placeholder="密码" style="width: 290px;" id="pwd"/>
					<p style="line-height: 60px;position: absolute;left: 60px;" id="tip2">提示文字</p>
					<p style="line-height: 60px;position: absolute;right: 60px;"><a href="#">找回密码</a> | <a href="#">注册账号</a></p>
				</div>
				<input type="submit" id="btn2" value="登录" />
				<div class="wx">
					<ul>
						<li><a href="#"><img src="images/dl_06.jpg"/></a></li>
						<li><a href="#"><img src="images/dl_08.jpg"/></a></li>
						<li><a href="#"><img src="images/dl_10.jpg"/></a></li>
						<li><a href="#"><img src="images/dl_12.jpg"/></a></li>
						<li><a href="#"><img src="images/dl_14.jpg"/></a></li>
					</ul>
				</div>
				<a href="#" style="position: absolute;bottom: -7px;right: 0;"><img src="images/dl_22.jpg"/></a>
			</div>
		</div>
		<div class="footer">
			<ul class="con">
				<li><a href="#">关于走秀</a></li>
				<li><a href="#">About us</a></li>
				<li><a href="#">媒体报道</a></li>
				<li><a href="#">品牌招商</a></li>
				<li><a href="#">加入走秀</a></li>
				<li><a href="#">网站地图</a></li>
				<li><a href="#">联系我们</a></li>
				<li><a href="#" style="border: none;">品牌大全</a></li>
			</ul>
			<p class="copy">Copyright&copy;2008-2017<a href="#">Xiu.com</a>版权所有.粤ICP备07502993号</p>
		</div>
	</body>
</html>
